<template>
    <div class="tabbar-layout" v-show="hidshow">
        <ul class="tabbar">
            <li class="tabbar-item"
                :class="{'checked': menu.checked}"
                v-for="(menu,index) in tabList"
                :key="index"
                @click.stop="tabClick(menu,index)"
            >
                <img :src='menu.checked? menu.checkedIcon : menu.icon' alt="" :class="{'add': index === 2}">
                <span class="font">{{menu.title}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Tabbar',
        data() {
            return {
                tabList: [
                    {
                        icon: require('../../assets/image/new.png'),
                        checkedIcon: require('../../assets/image/checked-new.png'),
                        checked: true,
                        title: '最新',
                        url: 'new'
                    },
                    {
                        icon: require('../../assets/image/project.png'),
                        checkedIcon: require('../../assets/image/checked-project.png'),
                        checked: false,
                        title: '项目',
                        url: 'project'
                    },
                    {
                        icon: require('../../assets/image/add.png'),
                        checkedIcon: require('../../assets/image/checked-add.png'),
                        checked: false,
                        title: '',
                        // url: 'create'
                    },
                    {
                        icon: require('../../assets/image/share.png'),
                        checkedIcon: require('../../assets/image/checked-share.png'),
                        checked: false,
                        title: '分享',
                        url: 'share'
                    },
                    {
                        icon: require('../../assets/image/person.png'),
                        checkedIcon: require('../../assets/image/checked-person.png'),
                        checked: false,
                        title: '我的',
                        url: 'person'
                    }
                ],
                docmHeight: '0',//默认屏幕高度
                showHeight: '0', //实时屏幕高度
                hidshow: true, // 显示或者隐藏footer,
                isResize: false, // 默认屏幕高度是否已获取
            }
        },
        mounted() {
            // window.onresize监听页面高度的变化
            window.onresize = ()=>{
                return(()=>{
                    if (!this.isResize) {
                        //默认屏幕高度
                        this.docmHeight = document.documentElement.clientHeight
                        this.isResize = true
                    }
                    //实时屏幕高度
                    this.showHeight = document.body.clientHeight

                })()
            }
            this.tabClick(this.tabList[this.$parent.currentIndex],this.$parent.currentIndex)
            document.addEventListener('click', () => {
                if(this.$parent.isShowAdd)
                    this.$parent.isShowAdd = false;
            })
        },
        methods: {
            tabClick(menu,index) {
                this.tabList.forEach(d => {
                    d.checked = false;
                });
                if(index === 2) {
                    this.$parent.isShowAdd = true;
                    this.$parent.currentIndex = 1;
                    this.tabList[1].checked = true;
                } else {
                    menu.checked = true;
                    this.$parent.currentIndex = index;
                }
            },
        },
        watch: {
            showHeight:function() {
                if (this.docmHeight > this.showHeight){
                    this.hidshow=false
                }else{
                    this.hidshow=true
                }
            },

        }
    }
</script>

<style scoped>
    .tabbar-layout {
        width: 100%;
        height: 110px;
        background-image: url("../../assets/image/bottom.png");
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 30px 30px 0 0;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99999;
    }
    .tabbar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 20px;
        margin: 0;
        height: 100%;
    }
    .tabbar-item {
        width: 122px;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .checked {
        width: 122px;
        height: 110px;
        background-image: url("../../assets/image/checked-bg.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    img {
        /*width: 36px;*/
        height: 40px;
        margin-bottom: 10px;
    }
    .tabbar-item:nth-child(3) img {
        width: 76px;
        height: 89px;
    }
    .checked span {
        color: #3EC6EF;
    }

</style>
